<template>
  <div>
    <v-nav :current="4" @changelang="changelang"></v-nav>
    <img src="@/components/canping.png" alt="" style="width: 100%">
    <div class="item" v-for="list in lists" :key="list.id">
      <div @click="toList(list.name, list.id)">
        <brief :title="list.name"></brief>
      </div>
      <div class="pro">
        <div class="pro-item" v-for="item in list.data" :key="item.id" @click="toDetails(item.id)">
          <div>
            <img :src="item.src" alt="">
          </div>
          <span>{{item.name}}</span>
        </div>
      </div>
      <div class="mb20"></div>
    </div>
    <v-footer></v-footer>
  </div>
</template>

<script>
import vNav from '@/components/nav/nav'
import vFooter from '@/components/footer'
import brief from '@/components/brief'
import {mapGetters} from 'vuex'
import { getProductData } from '@/services/api.js'
import { getProductDataEn } from '@/services/api_en.js'
export default {
  data () {
    return {
      lists: [],
      items: [],
      id: null,
      page: 1
    }
  },
  props: {
  },
  computed: {
    ...mapGetters({
      'lang': 'lang'
    })
  },
  components: {
    vNav,
    vFooter,
    brief
  },
  methods: {
    toDetails (current) {
      this.$router.push({name: 'productDetails', params: {id: current}})
    },
    toList (name, id) {
      this.$router.push({name: 'productList', params: {name: name, id: id}})
    },
    _getChList (sw, page) {
      this.title = '产品中心'
      this.details = '详情'
      getProductData().then((res) => {
        console.log(res)
        this.lists = res
      })
    },
    _getEnList () {
      this.title = 'Product Center'
      this.details = 'details'
      getProductDataEn().then((res) => {
        console.log(res)
        this.lists = res
      })
    },
    version () {
      if (this.lang === 1) {
        this._getChList()
      }
      if (this.lang === 2) {
        this._getEnList()
      }
    },
    changelang (res) {
      if (res === 1) {
        this._getChList()
      }
      if (res === 2) {
        this._getEnList()
      }
    }
  },
  created () {
    this.version()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import '../util/common.scss';
h1 {
  padding: 36rem/$font-size-base 0;
  font-size: 30rem/$font-size-base;
  letter-spacing: 1px;
  color: #333;
  font-weight: bolder;
  text-align: left;
  padding-left: 30rem/$font-size-base;
}
.pro {
  width: 690rem/$font-size-base;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #e6e6e6;
  padding-top: 33rem/$font-size-base;
  .pro-item {
    div {
      width: 326rem/$font-size-base;
      height: 218rem/$font-size-base;
      background-color: #ffffff;
      border: solid 1px #cccccc;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 260rem/$font-size-base;
        height: 191rem/$font-size-base;
      }
    }
    span {
      display: block;
      font-size: $baseFontSize2;
      color: $font-color-base;
      text-align: center;
      margin-top: 28rem/$font-size-base;
      padding-bottom: 39rem/$font-size-base;
    }
  }
}
.mb20 {
  width: 100%;
  height: 20rem/$font-size-base;
  background-color: #f0f0f6
}
</style>
